<template>
  <div class="m-line">
    <el-input class="m-input-text m-code-input" type="number" input-style="height:100%;position:relative;left:-10px;"
              v-model='code' placeholder="邮箱验证码" @input="handleCodeInput"/>
    <el-button type="primary" class="m-code-btn" @click="handleSendCode">
      {{ sendButtonContent }}
    </el-button>
  </div>
  <div class="m-input-hint" v-show="codeWarnging">请输入正确的四位验证码！</div>
  <div class="m-line">
    <el-input class="m-input-text"
              input-style="height:100%;position:relative;left:-10px;"
              size="large"
              placeholder="新密码"
              type="password"
              v-model="password"
              @input="handleInput"/>
  </div>
  <div class="m-input-tishi">密码需要至少6位，且由大写字母、小写字母和数字组成</div>
  <div class="m-input-hint" v-show="emailWarnging">密码太短了</div>
  <div class="m-line">
    <el-button type="primary" class="m-register-btn" v-bind:disabled="verifyCodeDisabled" @click="handleVerifyCode">
      修改密码
    </el-button>
  </div>
</template>

<script>
import {User} from "../../utils/http/user";

export default {
  name: "ChangePassword",
  data: function () {
    return {
      code: "",
      password: "",
      constEmail: "",
      sendButtonContent: "获取验证码",
      emailWarnging: false,
      codeWarnging: false,
      verifyCodeDisabled: true,
      restTime: 0,
    }

  },
  methods: {
    handleInput() {
      if (this.validateMail(this.password)) {
        this.verifyCodeDisabled = false;
        this.emailWarnging = false;
      } else {
        this.verifyCodeDisabled = true;
        this.emailWarnging = true;
      }
    },
    validateMail(email) {
      return email.length > 6;
    },
    async handleSendCode() {
      let resp = await User.getVerifyEmail(this.$store.state.userInfo.email);
      if (!resp.success) {
        this.$message.error(resp.message)
      } else {
        this.$message.success("发送成功！")
        this.sendCodeDiasbled = true;
        this.restTime = 60;
        let timer = setInterval(() => {
          this.sendButtonContent = (this.restTime--) + "秒后重新发送";
          if (this.restTime === 0) {
            clearInterval(timer)
            this.sendCodeDiasbled = !this.validateMail(this.password);
            this.sendButtonContent = "获取验证码";
          }
        }, 1000)
      }
    },
    handleCodeInput() {
      if (this.validateCode(this.code)) {
        this.verifyCodeDisabled = false;
        this.codeWarnging = false;
      } else {
        this.verifyCodeDisabled = true;
        this.codeWarnging = true;
      }
    },
    validateCode(code) {
      return code.length === 4;
    },
    async handleVerifyCode() {
      if (this.code.length < 4){
        this.$message.error("请输入完整的四位验证码");
        return
      }
      let resp = await User.changePassword(this.code, this.password)
      if (resp.success) {
        this.$message.success("修改成功！");
        this.$emit('closeModal')
      } else {
        this.$message.error(resp.message);
      }
    },
  }
}
</script>

<style scoped>

.m-leftpic img {
  height: 100%;
}

.m-code-input {
  width: 150px;
}

.m-input-text {
  height: 52px;
  text-indent: 10px;
  border-radius: 5px;
  font-size: 20px;
}

.m-input-text-short {
  height: 40px;
  border-radius: 5px;
  font-size: 20px;
}

.m-code-btn {
  width: 300px;
  height: 52px;
  font-size: 20px;
}

.m-register-btn {
  width: 100%;
  height: 52px;
  font-size: 20px;
}

.m-line {
  margin-top: 50px;
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.m-input-hint {
  position: absolute;
  font-size: 14px;
  color: #ff582c;
}

.m-input-tishi {
  font-size: 14px;
  color: #3689FF;
}

input::-webkit-input-placeholder {
  font-size: 16px;
}

input {
  outline-color: #3689FF;
}
</style>